import React, {Component,} from 'react';
import {Modal, message} from "antd"
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import ThePagination from "@/components/ThePagination";
import {apiPopupPage, apiPopupDel, apiPopupOpen} from '@/request/homePopup/index'

export default class HomePopup extends Component {
    state = {
        loading: false,
        dataSource: [],
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: 80
            },
            {
                title: '弹窗名称',
                dataIndex: 'popUpName',
                key: 'popUpName',
            },
            {
                title: '展示位置',
                dataIndex: 'popUpType',
                key: 'popUpType',
                render: (text) => {
                    let str = ''
                    switch (text) {
                        case 0:
                            str = '首页系统'
                            break
                        case 1:
                            str = '首页活动'
                            break
                        case 2:
                            str = '我的口袋活动'
                            break
                        case 3:
                            str = '风控系统'
                            break
                    }
                    return str
                }
            },
            // {
            //   title: '类型',
            //   dataIndex: 'popUpType',
            //   key: 'popUpType',
            //   render: (text) => {
            //     let str = ''
            //     switch (text) {
            //       case 0:
            //         str = '系统'
            //         break
            //       case 1:
            //         str = '活动'
            //         break
            //     }
            //     return str
            //   }
            // },
            {
                title: '状态',
                dataIndex: 'onState',
                key: 'onState',
                render: (text) => {
                    let str = ''
                    switch (text) {
                        case 1:
                            str = '开启'
                            break
                        case 0:
                            str = '关闭'
                            break
                    }
                    return str
                }
            },
            {
                title: '最近修改时间',
                dataIndex: 'updateTime',
                key: 'updateTime',
                render: (text) => {
                    return text ? text : '/'
                }
            },
            {
                title: '操作',
                render: (record) => {
                    return <div>
                        <TheButton onClick={() => this.editPopup(record)}>修改</TheButton>
                        <TheButton onClick={() => this.viewPopup(record)}>查看</TheButton>
                        {
                            record.popUpName !== '新人弹窗' && record.popUpName !== '优惠券到账/到期提醒' ? record.onState === 0 ?
                                <TheButton onClick={() => this.onStatus(record)}>开启</TheButton> :
                                <TheButton onClick={() => this.offStatus(record)}>关闭</TheButton> : null
                        }
                        {record.onState === 0 ?
                            <TheButton onClick={() => this.deletePopup(record.id)}>删除</TheButton> : null}
                    </div>
                }
            }
        ],
        pageData: {
            current: 1,
            size: 10,
        },
        total: 0,
    }

    async componentDidMount() {
        await this.getData()
    }

    // 开启弹窗
    async onStatus(params) {
        const api = async () => {
            let res = await apiPopupOpen({id: params.id, onState: 1, popUpType: params.popUpType})
            if (res.code === 0) {
                message.success('开启成功！');
                await this.getData()
            }
        }
        // //如当前资源位已存在1个已经开启的活动弹窗，则弹出以下对话框提示，即活动类弹窗目前开启的时候只能存在一个
        // if (params == 1) {
        //   React.$confirm({
        //     title: "当前资源位最多只能存在一个开启中的活动弹窗，请先关闭其他的活动弹窗",
        //     onOk: async () => {
        //       api()
        //     },
        //     onCancel: () => {
        //       return
        //     }
        //   });
        // }

        api()
    }

    // 关闭弹窗
    async offStatus(params) {
        let res = await apiPopupOpen({id: params.id, onState: 0, popUpType: params.popUpType})
        if (res.code === 0) {
            message.success('关闭成功！');
            await this.getData()
        }
    }

    // 删除活动弹窗
    deletePopup(id) {
        React.$confirm({
            title: '提示',
            content: '删除之后将不能再恢复数据，是否删除？',
            onOk: async () => {
                let res = await apiPopupDel({id})
                if (res.code === 0) {
                    message.success('删除成功！');
                    this.pageChange(1, 10)
                }
            }
        });
    }

    // 新增活动弹窗
    addPopup() {
        this.props.history.push(`/settings/homePopup/addActivePopup/null`);
    }

    // 修改活动弹窗
    editPopup(params) {
        if (params.popUpName === '新人弹窗') {
            this.props.history.push(`/settings/homePopup/editNumansPopup/${params.id}`);
        } else if (params.popUpName === '优惠券到账/到期提醒') {
            this.props.history.push(`/settings/homePopup/editCouponPopup/${params.id}`);
        } else {
            this.props.history.push(`/settings/homePopup/editActivePopup/${params.id}`);
        }
    }

    // 查看活动弹窗
    viewPopup(params) {
        this.props.history.push(`/settings/homePopup/viewPopup/${params.id}`);
    }

    // 首页弹窗分页
    getData = async () => {
        const {pageData: {current, size}} = this.state
        let res = await apiPopupPage({current, size})
        if (res.code === 0) {
            this.setState({
                dataSource: res.data.records,
                pageData: {current: res.data.current, size: res.data.size},
                total: res.data.total
            })
        }
    }
    // 切换分页
    pageChange = (current, size) => {
        this.setState({
            pageData: {current, size}
        }, () => {
            this.getData()
        })
    };

    render() {
        const {loading, dataSource, columns, pageData, total} = this.state
        return <div className={"p-layout-box"}>
            <div><TheButton style={{width: '100px'}} size="middle" type="default"
                            onClick={() => this.addPopup()}>新增</TheButton></div>
            <div className={"p-layout-content"}>
                <TheTable loading={loading} dataSource={dataSource} columns={columns}/>
                <ThePagination
                    pageNo={pageData.current}
                    pageSize={pageData.size}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        </div>
    }
}
